import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {DrawerContentScrollView, DrawerContentComponentProps} from "@react-navigation/drawer";
import {Drawer, Avatar, Text, Title, Icon, Divider, Caption} from "react-native-paper";
import {Colors} from "react-native/Libraries/NewAppScreen";

export const DrawerMenu = (props: DrawerContentComponentProps) => {
    return (
        <DrawerContentScrollView {...props}
                                 style={style.drawer}>

            <View style={{paddingLeft: 22, marginBottom: 28}}>
                <Avatar.Text label={`M9`}
                             size={44}
                             maxFontSizeMultiplier={6}
                             style={{
                                 backgroundColor: `#EE7100`
                             }}
                             color={`#FFF`}/>

                <Title children={`M9M9Ra | Игорь`}
                       style={{
                           fontWeight: `700`,
                           fontSize: 16
                       }}/>

                <Text children={`id @M9M9Ra`}
                      style={{
                          fontWeight: `600`,
                          fontSize: 15
                      }}/>
            </View>

            {/*<View style={{paddingLeft: 14}}>*/}
            {/*    <View style={{flexDirection: 'row', alignItems: `center`}}>*/}

            {/*        <Avatar.Text label={`M9M9Ra | Игорь`}*/}
            {/*                     color={`#FFF`}*/}
            {/*                     style={{*/}
            {/*                         backgroundColor: `#EE7100`*/}
            {/*                     }}*/}
            {/*                     size={44}/>*/}

            {/*        <View style={{marginLeft: 7, flexDirection: 'column'}}>*/}
            {/*            <Title children={`M9M9Ra | Игорь`}*/}
            {/*                   style={{*/}
            {/*                       fontSize: 14,*/}
            {/*                       marginTop: 1,*/}
            {/*                       fontWeight: '700',*/}
            {/*                   }}/>*/}
            {/*            <Caption children={`89632912902`}*/}
            {/*                     style={{*/}
            {/*                         fontSize: 13,*/}
            {/*                         fontWeight: `600`,*/}
            {/*                         lineHeight: 14*/}
            {/*                     }}/>*/}
            {/*        </View>*/}
            {/*    </View>*/}
            {/*</View>*/}

            {/*<Divider style={{*/}
            {/*    marginVertical: 10,*/}
            {/*    marginBottom: 20*/}
            {/*}}/>*/}

            {/*<View style={{*/}
            {/*    marginVertical: 10,*/}
            {/*    marginBottom: 20*/}
            {/*}}/>*/}

            <View style={style.drawerSection}>

                <TouchableOpacity style={style.drawerItem}
                                  onPress={() => {
                                      props.navigation.navigate(`HomeScreen`);
                                  }}>
                    <Icon size={28}
                          color={`#EE7100`}
                          source={`home-outline`}/>

                    <Text children={`Главное меню`}
                          style={style.drawerText}/>
                </TouchableOpacity>

                <TouchableOpacity style={style.drawerItem}
                                  onPress={() => {
                                      props.navigation.navigate(`ProfileScreen`);
                                  }}>
                    <Icon size={28}
                          color={`#EE7100`}
                          source={`account-outline`}/>
                    <Text children={`Мой профиль`}
                          style={style.drawerText}/>
                </TouchableOpacity>

                <TouchableOpacity style={style.drawerItem}
                                  onPress={() => {
                                      props.navigation.navigate(`BasketScreen`);
                                  }}>
                    <Icon size={28}
                          color={`#EE7100`}
                          source={`basket-outline`}/>
                    <Text children={`Корзина`}
                          style={style.drawerText}/>
                </TouchableOpacity>

                <TouchableOpacity style={style.drawerItem}
                                  onPress={() => {
                                      props.navigation.navigate(`LocationScreen`);
                                  }}>
                    <Icon size={28}
                          color={`#EE7100`}
                          source={`map-marker-radius-outline`}/>
                    <Text children={`Адрес`}
                          style={style.drawerText}/>
                </TouchableOpacity>
            </View>

            <Divider style={{
                backgroundColor: `#EE7100`,
                marginHorizontal: 24,
                marginVertical: 20
            }}/>

            <View style={style.drawerSection}>

                <TouchableOpacity style={style.drawerItem}
                                  onPress={() => {
                                      props.navigation.navigate(`ProfileScreen`);
                                  }}>
                    <Icon size={28}
                          color={`#EE7100`}
                          source={`tune-variant`}/>
                    <Text children={`Настройки`}
                          style={style.drawerText}/>
                </TouchableOpacity>


                <TouchableOpacity style={style.drawerItem}
                                  onPress={() => {
                                      props.navigation.navigate(`HomeScreen`);
                                  }}>
                    <Icon size={28}
                          color={`#EE7100`}
                          source={`magnify`}/>
                    <Text children={`Поиск`}
                          style={style.drawerText}/>
                </TouchableOpacity>
            </View>
        </DrawerContentScrollView>
    );
};

const style = StyleSheet.create({
    drawer: {
        flex: 1,
        backgroundColor: Colors.lighter,
        paddingTop: 13
    },
    drawerSection: {
        paddingLeft: 22,
        gap: 14
    },
    drawerItem: {
        flexDirection: `row`,
        alignItems: `center`,
        gap: 14
    },
    drawerText: {
        fontSize: 14,
        fontWeight: `700`
    }
});
